<template>
    <ul>
     <li  class="tabItem"
     v-for='(item,index) in navData'
     :class="{'router-link-active':myPath===item.url}"
     :key="item.title"
      >
      <template v-if="item.hasRouter">
	      <a href="javascript:void(0)" @click="goFullView(item.url)">
          <div :class='item.iconClass'></div>
          <p class=" nav-icon-title" >{{ item.title}}</p>
      	</a>
      </template>
      <template v-else>
        <a :href="item.url" @click="outLinkChange()">
          <div :class='item.iconClass'></div>
          <p class=" nav-icon-title" >{{ item.title}}</p>
      	</a>
      </template>
     </li>
    </ul>
</template>

<script>
	import fun from "../../util/function.js";
export default {
  data(){
    return {
     myPath:'',  //路由地址 url
     navData:[
       {
         url:'home',
         iconClass:'navIconPic_1',
         title:'直播列表',
         hasRouter:true
       },
       {
         url:'smallVideo',
         iconClass:'navIconPic_2',
         title:'小视频',
         hasRouter:true
       },
       //特色频道
       {
       	url:'featureHome',
         //url:'featurePD',
         iconClass:'navIcon_30',
         title:'特色频道',
         hasRouter:true
       },
       {
         url:'mine',
         iconClass:'navIconPic_5',
         title:'我的',
         hasRouter:true
       }
     ]
    }
  },
  mounted() {
    // 初始化页面navTab高亮显示
    this.myPath=this.$route.path.split('/')[2];
  },
  watch:{
    // 监听路由navTab高亮显示
    $route(to,from){
     this.myPath=to.path.split('/')[2];
    }
  },
  methods: {
    // 在项目内跳转使用 push,其它外链使用href跳转
    goFullView (url) {
    	if(url =="mine" && this.$store.state.isYk){   		
    		 	if(window.zhAppVersion=='hightVersion'){
		    		this.loginPage()  //app登录页面
		    	}else if(window.zhAppVersion=='lowVersion'){
		    		  this.toastMessage('APP版本过低，请升级！当前为游客浏览模式。')	
		        }else if(window.zhAppVersion=='noVersion'){
		    		 this.$emit("sendParentMsg",{"type":"ykLink"})	
		    	}
    		 return
    	}
    	if(url =="mine" && this.$store.state.userInfo.un=="Pnr3NFDGxlk"){//app增加1027 没有登录 进不去我的页面
    		this.toast = this.$createToast({
                  txt: "请登录中国银行APP",
                  time: 1500,
                  type: "txt"
       });
           this.toast.show();
    		return
    	}
      this.$router.push(`/${this.$channel}/${url}`)
    },
    // 跳转到外链也能navTab高亮显示
    outLinkChange(){
       //this.myPath='https://mall.e.boc.cn/eshop-mobile/index.html';
       this.$emit("sendParentMsg",{"type":"link"})
    }
  }
};
</script>
<style scoped="scoped">
  /* .tabItem p{
    color: #bebebe;
  } */
  .tabItem a{
    display: block;
    width: 100%;
    height: 100%;
  }
  .router-link-active p {
    color: #cc2d30;
  }
 .tabItem div{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .router-link-active .navIconPic_1 {
     background: url("../../assets/images/navIcon_1.png") no-repeat;
     background-size: 40px;
     animation: keyNavBottom 0.3s ease-in;
  }
  @keyframes keyNavBottom{
  	0%{
  		transform: scale(1);
  	}
  	25%{transform: scale(1.1);
   }
  	50%{transform: scale(0.9);
   }
   75%{transform: scale(1.1);
   }
  	100%{
  		transform: scale(1);
  	}
  }
  .navIconPic_1{
    background: url("../../assets/images/navIcon_6.png") no-repeat;
    background-size: 40px;
  }
  .router-link-active .navIconPic_2 {
     background: url("../../assets/images/navIcon_2.png") no-repeat;
     background-size: 40px;
    animation: keyNavBottom 0.3s ease-in;
  }
  .navIconPic_2{
    background: url("../../assets/images/navIcon_7.png") no-repeat;
    background-size: 40px;
  }
  .router-link-active .navIcon_30 {
     background: url("../../assets/images/navIcon_30.png") no-repeat;
     background-size: 40px;
    animation: keyNavBottom 0.3s ease-in;
  }
  .navIcon_30{
    background: url("../../assets/images/navIcon_31.png") no-repeat;
    background-size: 40px;
  }
  .router-link-active .navIconPic_4 {
     background: url("../../assets/images/navIcon_4.png") no-repeat;
     background-size: 40px;
     animation: keyNavBottom 0.3s ease-in;
  }
  .navIconPic_4{
    background: url("../../assets/images/navIcon_9.png") no-repeat;
    background-size: 40px;
  }
  .router-link-active .navIconPic_5 {
     background: url("../../assets/images/navIcon_5.png") no-repeat;
     background-size: 40px;
    animation: keyNavBottom 0.3s ease-in;
  }
  .navIconPic_5{
    background: url("../../assets/images/navIcon_10.png") no-repeat;
    background-size: 40px;
  }
</style>


